<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <title>充值</title>  
	    <link rel="stylesheet" href="../libs/mui/mui.css" />
	    <link rel="stylesheet" href="../css/mui.min.css">
	    <link rel="stylesheet" type="text/css" href="../css/main.css"/>
		<link rel="stylesheet" type="text/css" href="../libs/iconfont/fonts/iconfont.css" />
		<style>
			b{color: #ff043f;}
			label{margin-bottom: 6px;display: block;}
			.mui-radio input[type=radio]:checked:before {content: '\e442';}
			.mui-radio input[type=radio]:checked:before {color: #2875f5;}
			.mui-radio i{font-size: 28px;}		
			.mui-input-row label{text-align: left;padding-left: 15px;padding-right:0px;width:30%;color: black;}
			.mui-input-row label~input{width: 70%;}	
			/*选择按钮*/
			.chose>button{background-color: white; border: 1px solid #DDDDDD; color: black;margin-right: 5px;padding: 6px 15px;}			
			.back-orange {background: #338efc !important;color: white!important;border: 1px solid #338efc!important;}		
		</style>		
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">充值</h1>
		</header>
		<div class="mui-content">
			<div class="Indiv">
				<div class="mui-table-view">
					<div class="mui-table-view-cell">
						<label class="gray">请输入充值金额</label>
						<input type="text" class="pay_ment" id="pay_ment" placeholder="输入充值金额"/>
						<p class="chose">
							<button type="button" class="mui-btn">50元</button>
							<button type="button" class="mui-btn">100元</button>
							<button type="button" class="mui-btn">200元</button>
							<button type="button" class="mui-btn">500元</button>
						</p>
					</div>
				</div>
				<div class="m3">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<span class="gray">请选择充值方式</span>
						</li>
					</ul>
				</div>
				<form>	
					<ul class="mui-table-view">
						<div class="mui-input-row mui-radio mui-right">
							<label style="width: 100%;"><i class="mui-icon iconfont ify5">&#xe615;</i> 支付宝</label>
							<input name="radio1" type="radio" checked="checked" style="margin-top: 11px;" id="let">							
						</div>
					</ul>
					<ul class="mui-table-view">											
						<div class="mui-input-row mui-radio mui-right">	
							<label style="width: 100%;"><i class="mui-icon iconfont lvs">&#xe659;</i> 微信</label>								
							<input name="radio1" type="radio" style="margin-top: 11px;" id="zfb">				
						</div>
					</ul>	
					<div class="res_pasw">
						<button type="button">立即充值</button>
					</div>
				</form>
			</div>			
		</div>
		<script type="text/javascript" src="../js/open.js"></script>
		<script type="text/javascript" src="../js/mui.js"></script>
		<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
		<script type="text/javascript" src="../js/web_js/public.js"></script>
		<script type="text/javascript" src="../js/web_js/cash_pay.js"></script>
		<script>
			mui.init({ 
				swipeBack: true //启用右滑关闭功能
			});			
		</script>
		<script>
			$(".chose>button").each(function(i){
	            var $this = $(this);
	            $this.on('tap',function(){
	                $(".chose>button").removeClass('back-orange');
	                $this.addClass('back-orange');
	                var pay = $this.text();
	                $('.pay_ment').val(pay);
	            });
	        }); 
	        pay_ment.addEventListener("input", function(event) {
	        	var pay_ment = $(".pay_ment").val();
	        	if(!pay_ment.match(numb)){
	        		toast('请输入非0开头的整数'); 
	        	}
			     $(".chose>button").removeClass('back-orange');
			})
		</script>
	</body>
</html>